<template>
  <view>
    <page-head title="button,按钮"></page-head>
    <view class="smart-padding-wrap">
      <!-- 主操作按钮 -->
      <button type="primary">页面主操作 normal</button>
      <button type="primary" :loading="true">页面主操作 loading</button>
      <button type="primary" disabled="false">页面主操作 disabled</button>
      
      <!-- 次操作按钮 -->
      <button type="default">页面次操作 normal</button>
      <button type="default" disabled="false">页面次操作 disabled</button>
      
      <!-- 警告操作按钮 -->
      <button type="warn">页面警告操作 warn</button>
      <button type="warn" disabled="false">页面警告操作 warn disabled</button>
      
      <!-- 镂空按钮 -->
      <button type="primary" plain="true">镂空按钮 plain</button>
      <button type="primary" plain="true" disabled="false">镂空按钮 plain disabled</button>
      
      <!-- 迷你按钮 -->
      <button type="primary" size="mini" class="mini-btn">按钮</button>
      <button type="default" size="mini" class="mini-btn">按钮</button>
      <button type="warn" size="mini" class="mini-btn">按钮</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以在这里添加按钮相关的数据
    };
  },
  methods: {
    // 可以在这里添加按钮点击等方法
  }
};
</script>

<style>
button {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.mini-btn {
  margin-right: 30rpx;
}
</style>